<template>
	<div class="routerlistbox">
		<span @click="routerlink('/homeabnormalexamnumber', 1)" :class="activeindex == 1 ? 'hover' : ''">答题卡异常</span>
		<span @click="routerlink('/homeoptionexception', 2)" :class="activeindex == 2 ? 'hover' : ''">填涂异常</span>
		<span @click="routerlink('/homeabnormalrating', 3)" :class="activeindex == 3 ? 'hover' : ''">打分异常</span>
	</div>
</template>

<script>
import { get } from '../../request/api.js'
export default {
	data() {
		return {
			activeindex: -1
		}
	},
	mounted() {
		this.updateActiveIndex()
	},
	methods: {
		updateActiveIndex() {
			this.activeindex = parseInt(this.$route.query.activeIndex) || -1
		},
		routerlink(Link, num) {
			this.activeindex = num
			let obj = { examCourseId: this.$route.query.subjectid }
			get('/scanpaperexception/exception', obj).then(res => {
				if (res.code == 200) {
					const { examNoExceptionCount, optionExceptionCount, scoreExceptionCount } = res.data;
					let hasData = false;
					if (num == 1 && examNoExceptionCount != 0) {
						hasData = true;
					} else if (num == 2 && optionExceptionCount != 0) {
						hasData = true;
					} else if (num == 3 && scoreExceptionCount != 0) {
						hasData = true;
					}
					if (hasData) {
						this.$router.push({
							path: Link,
							query: {
								subjectid: this.$route.query.subjectid,
								examid: this.$route.query.examid,
								examtitle: this.$route.query.examtitle,
								sujectname: this.$route.query.sujectname,
								activeIndex: num
							}
						})
					} else {
						this.$message({ message: '暂无异常数据', type: 'warning',duration: 700 });
					}
				} else {
					this.$message.error(res.message);
				}
			})
		}
	},
	watch: {
		'$route.query.activeIndex': {
			immediate: true,
			handler(newVal) {
				this.updateActiveIndex()
			}
		}
	},
}
</script>

<style scoped>
.header {
	padding: 0 40px;
	height: 48px;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	background: #2379F6;
	font-size: 16px;
}

.header h3 {
	font-weight: normal;
	font-size: 16px;
}

.header p {
	display: flex;
}

.header p b {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height: 32px;
	cursor: pointer;
	margin-right: 14px;
}

.header p b img {
	width: 16px;
	margin-right: 8px;
}

.header p em {
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color: #2379F6;
	text-align: center;
	line-height: 32px;
	cursor: pointer
}

.routerlistbox {
	width: 224px;
	height: 30px;
	background: #295cff0f;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	display: flex;
	align-items: center
}

.routerlistbox span {
	flex: 1;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
}

.routerlistbox span.hover {
	background: #fff;
	color: #2379F6
}
</style>